<template>
  <div class="pay">
    <div class="checkout-tit">
      <h4 class="tit-txt">
        <span class="success-icon"></span>
        <span class="success-info"
          >订单提交成功，请您及时付款，以便尽快为您发货</span
        >
      </h4>
      <div class="paymark">
        <span class="fl"
          >请您在提交订单4小时之内完成支付，超时订单自动取消</span
        >
      </div>
    </div>
    <div class="checkout-info">
      <h4>重要说明：</h4>
      <ol>
        <li>平台目前支持<span class="zfb">微信</span>支付方式。</li>
        <li>其它支付渠道正在调试中，敬请期待。</li>
      </ol>
    </div>
    <div class="wechat">
      <img src="../Pay/images/wechat.png" style="width: 40px" />
      <div style="padding-left: 10px">微信支付</div>
    </div>
    <van-button
      type="primary"
      size="large"
      color="#B4282D"
      block
      @click="handlePay"
      >立即支付</van-button
    >
  </div>
</template>

<script>
//import { reqPayInfo, reqPayStatus } from "@/api";
//import QRCode from "qrcodejs2";

export default {
  data() {
    return {
      radio: "1",
      payInfo: {},
    };
  },
  methods: {
    handlePay(){
      this.$router.push({
        path: "/paysuccess",
      });
    },
  },
    // //获取支付信息
    // async getPayInfo() {
    //   //获取路由传递过来的订单编号
    //   const { order_id } = this.$route.query;
    //   //发请求
    //   let result = await reqPayInfo(order_id);
    //   if (result.code === 200) {
    //     this.payInfo = result.data;
    //   } else {
    //     this.$message.warning(result.message);
    //   }
    // },
    // //点击支付按钮的回调
    // async handlePay() {
    //   //弹出配置
    //   const options = {
    //     dangerouslyUseHTMLString: true, //让弹窗支持html片段
    //     showCancelButton: true, //展示取消按钮
    //     cancelButtonText: "支付遇到问题",
    //     confirmButtonText: "已完成支付",
    //     center: true,
    //     showClose: false,
    //   };
    //   try {
    //     //尝试把能唤起微信支付的字符串，转为base64编码的字符串
    //     let base64 = await QRCode.toDataURL(this.payInfo.codeUrl);
    //     //弹窗
    //     this.$alert(`<img style="width:200px" src="${base64}">`, "微信支付", {
    //       ...options,
    //       callback: async (type) => {
    //         if (type === "confirm") {
    //           //用户点击的是：【支付已完成】
    //           //停止心跳
    //           clearInterval(this.timer);
    //           //找服务器最终确认订单到底是否支付成功
    //           let result = await reqPayStatus(this.payInfo.orderId);
    //           if (result.code === 200) {
    //             //用户真的支付了
    //             this.$message.success("支付成功！");
    //             //跳转到支付成功页面
    //             this.$router.push({path: "/paysuccess"});
    //           } else {
    //             this.$message.warning("您的订单并未支付成功，请重新扫码支付！");
    //           }
    //         } else {
    //           //用户点击的是：【支付遇到问题】
    //           //提示一下
    //           this.$message.warning("支付遇到问题，请联系管理员！");
    //           //停止心跳
    //           clearInterval(this.timer);
    //         }
    //       },
    //     });
    //     //开始心跳请求（不断的去问服务器，支付了没有）
    //     this.timer = setInterval(async () => {
    //       //请求服务器询问订单支付状态
    //       let result = await reqPayStatus(this.payInfo.orderId);
    //       console.log(result);
    //       //如果支付成功
    //       if (result.code === 200) {
    //         //清除心跳
    //         clearInterval(this.timer);
    //         //关闭弹窗
    //         this.$msgbox.close();
    //         //跳转到支付成功页面
    //         this.$router.push({path: "/paysuccess"});

    //       }
    //     }, 2000);
    //   } catch (error) {
    //     this.$message.error(error);
    //   }
    // },
  mounted() {
    //this.getPayInfo();
  },
};
</script>

<style lang="less" scoped>
.pay {
  background: #fff;
  width: 100%;
  .checkout-tit {
    .tit-txt {
      font-size: 14px;
      line-height: 21px;

      .success-icon {
        width: 30px;
        height: 30px;
        display: inline-block;
      }

      .success-info {
        line-height: 30px;
        vertical-align: top;
      }
    }

    .paymark {
      line-height: 26px;
      padding: 0 13px;
      .fl {
        width: 100%;
        font-size: 14px;
      }
    }
  }

  .checkout-info {
    padding-left: 25px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border: 2px solid #e1251b;

    h4 {
      margin: 9px 0;
      font-size: 14px;
      line-height: 21px;
      color: #e1251b;
    }

    ol {
      padding-left: 25px;
      list-style-type: decimal;
      line-height: 24px;
      font-size: 14px;
    }

    ul {
      padding-left: 25px;
      list-style-type: disc;
      line-height: 24px;
      font-size: 14px;
    }
  }
  .wechat {
    background-color: #fff;
    height: 50px;
    padding: 50px 120px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
  }

  .van-button {
    width: 100%;
    position: fixed;
    bottom: 0px;
    font-size: 20px;
  }
}
</style>